<template>
  <div class="default">
    <div class="headcount">
      <div class="stat-item" v-for="(item, index) in stats" :key="index" @mouseenter="handleMouseEnter(index)" @mouseleave="handleMouseLeave(index)">
        <div class="box">
          <h4>{{ item.title }}</h4>
        </div>
        <div class="number" :data-value="item.value">{{ item.displayValue }}</div>
      </div>
    </div>

    <div class="leader">
      <div class="select">
        leader
        <el-select
            v-model="value"
            placeholder="选择部门"
            style="width: 240px; margin-bottom: 20px"
        >
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </div>
      <el-descriptions direction="vertical" border>
        <el-descriptions-item
            :rowspan="2"
            :width="140"
            label="头像"
            align="center"
        >
          <el-image
              style="width: 100px; height: 100px"
              src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
          />
        </el-descriptions-item>
        <el-descriptions-item label="姓名">陈明欣</el-descriptions-item>
        <el-descriptions-item label="部门">研发部</el-descriptions-item>
        <el-descriptions-item label="职位">实习生</el-descriptions-item>
        <el-descriptions-item label="电话">17752743325</el-descriptions-item>
        <el-descriptions-item label="邮箱">
          <el-tag  type="primary">2778305838@qq.com</el-tag>
        </el-descriptions-item>
      </el-descriptions>
    </div>

    <div class="pie"><Pie></Pie></div>

    <div class="staff-status">
      <h4 style="margin-bottom: 40px">今日考勤状态</h4>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="staff" label="员工" width="180" />
        <el-table-column prop="status" label="状态" width="180">
          <template #default="scope">
            <el-tag
                :type="scope.row.status === '缺卡' ? 'danger' : ''"
                effect="dark"
            >
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="date" label="时间" />
        <el-table-column prop="department" label="部门" />
      </el-table>
    </div>
  </div>
</template>

<script setup>
import Pie from "@/charts/Pie.vue";
import { ref, onMounted } from 'vue'

const stats = ref([
  { title: '公司总人数', value: 1200, displayValue: 0 },
  { title: '当月入职人数', value: 35, displayValue: 0},
  { title: '当月离职人数', value: 12, displayValue: 0},
  { title: '合同将到期人数', value: 8, displayValue: 0},
  { title: '实习生人数', value: 56, displayValue: 0 },
  { title: '当月面试人数', value: 128, displayValue: 0}
])

const activeIndex = ref(-1)

// 部门选择相关
const value = ref('')
const options = [
  {value: 'options', label: '研发部'},
  {value: 'Option2', label: '测试部'},
  {value: 'Option3', label: '人事部'},
  {value: 'Option4', label: '市场部'},
  {value: 'Option5', label: '业务部'},
]

// 考勤表格数据
const tableData = [
  {staff: '张三', status: '缺卡', date: '2016-05-03', department: '研发部'},
  {staff: '李四', status: '旷工', date: '2016-05-03', department: '研发部'},
  {staff: '王五', status: '缺卡', date: '2016-05-03', department: '测试部'},
  {staff: '赵六', status: '缺卡', date: '2016-05-03', department: '市场部'},
]

// 卡片交互
const handleMouseEnter = (index) => {
  activeIndex.value = index
}

const handleMouseLeave = () => {
  activeIndex.value = -1
}

// 数字滚动动画
const animateValue = (index, start, end, duration) => {
  let startTimestamp = null
  const step = (timestamp) => {
    if (!startTimestamp) startTimestamp = timestamp
    const progress = Math.min((timestamp - startTimestamp) / duration, 1)
    stats.value[index].displayValue = Math.floor(progress * (end - start) + start).toLocaleString()
    if (progress < 1) {
      window.requestAnimationFrame(step)
    }
  }
  window.requestAnimationFrame(step)
}

// 新增 页面加载时触发动画
onMounted(() => {
  stats.value.forEach((item, index) => {
    setTimeout(() => {
      animateValue(index, 0, item.value, 1500)
    }, index * 150)
  })
})
</script>

<style scoped>
.default {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 20px;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
}

.default > div {
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.headcount {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 25px 15px;
  border-radius: 12px;
  background: linear-gradient(135deg, #f5f7fa 0%, #eef1f5 100%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateY(0);
}

.stat-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1);
}




.stat-item:hover::before {
  transform: scaleX(1);
}

.box {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 15px;
}



.box h4 {
  margin: 0;
  color: #666;
  white-space: nowrap;
}

.number {
  font-size: 32px;
  font-weight: 700;
  color: cadetblue;
  position: relative;
  margin-bottom: 10px;
  letter-spacing: -0.5px;
  background: linear-gradient(90deg, #303133, #606266);
  -webkit-background-clip: text;
  background-clip: text;
  transition: all 0.3s ease;
}

.stat-item:hover .number {
  transform: scale(1.05);
}



.trend-indicator i {
  margin-right: 3px;
  font-size: 14px;
}


.select {
  display: flex;
  justify-content: space-between;
  font-size: 20px;
  color: cornflowerblue;
  align-items: center;
}

@media (max-width: 1024px) {
  .default {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    height: auto;
  }

  .headcount {
    grid-template-columns: repeat(2, 1fr);
  }

  .number {
    font-size: 28px;
  }

  .select {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}



@media (max-width: 768px) {
  .headcount {
    grid-template-columns: 1fr;
  }
}
</style>